<template>
  <view>
    <view class="cateBox" :style="{bottom:state==='shop'?'112rpx':'0px'}">
      <!-- 左侧列表 -->
      <scroll-view class="cate-left" scroll-y="true" :scroll-top="verticalNavTop" scroll-with-animation
        :style="{ height: height + 'px' }">
        <view class="cate-left-list" v-for="(item,index) in data" :key="index" @click="tapselect(index)">
          <!-- activeItem为选中状态 -->
          <view class="cate-left-item " :class="{activeItem:currentTab==index}">
            <label></label><text>{{item.name?item.name:item.navtitle}}</text>
          </view>
        </view>
      </scroll-view>
      <!-- 右侧列表 -->
      <scroll-view class="cate-right" scroll-y="true" @scroll="mainScroll" :scroll-into-view="'cate-'+mainCur"
        scroll-with-animation :style="{ height: height + 'px' }">
        <view v-for="(item,index) in data" :key="index" :id="'cate-'+index">
          <view class="cate-right-title">
            <view class="line"></view>
            <text>{{item.name?item.name:item.navtitle}}</text>
          </view>
          <view class="cate-right-list">
            <!-- 商品列表 -->
            <view class="shop space-between" v-for="(child,childindex) in item.goods" :key="childindex"
              @click="itemClick(child)" :style="{display:state==='shop'?'flex':'none'}">
              <image :src="child.image" mode=""></image>
              <view class="direction-start" style="width:65%;height: 165rpx;justify-content: space-between;">
                <view class="title">{{child.name}}</view>
                <view style="color:#666;font-size: 26rpx;">库存：{{child.stock}}</view>
                <view class="space-between" style="width:100%;">
                  <view class="center" v-if="type==='free'" style="font-size: 26rpx">
                    <text style="color:#FF5B45;font-size: 32rpx;margin-right:5rpx;">{{child.score}}</text>蓝宝石
                  </view>
                  <view class="center" v-else-if="type==='pay'" style="color:#FE3B2E;">
                    <text style="font-size: 24rpx;">￥</text>
                    <text style="font-size: 38rpx;">{{child.price}}</text>
                  </view>
                  <view class="center num">
                    <text @click.stop="carDeatil(child.id,1,item.id)" v-if="child.cart_nums!=0">-</text>
                    <text v-if="child.cart_nums!=0">{{child.cart_nums}}</text>
                    <text @click.stop="carDeatil(child.id,2,item.id)">+</text>
                  </view>
                </view>
              </view>
            </view>
            <!-- 群列表 -->
            <view v-for="(child,childindex) in item.qun" :key="childindex" @click="itemClick(child)"
              :style="{display:state==='qun'?'flex':'none',}" class="space-between ground">
              <view style="width:70%">{{child.name}}</view>
              <view class="but"
                :style="{color:active==child.chat_id?'#fff':'',background:active==child.chat_id?'#3F90FF':''}">发群
              </view>
            </view>
          </view>
        </view>
        <view style="height: 50rpx;"></view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Array,
        default () {
          return []
        }
      },
      height: {
        type: String
      },
      type: {
        type: String
      },
      state: {
        type: String,
        default: 'shop',
      }
    },
    data() {
      return {
        currentTab: 0,
        mainCur: 0,
        verticalNavTop: 0,
        list: [{}],
        active: '0',
      }
    },
    mounted() {
      this.getHeight();
    },
    methods: {
      itemClick(item) {
        if (this.state === 'shop') {
          uni.navigateTo({
            url: "/pages/gemstone/shopDetail?id=" + item.id + '&type=' + this.type
          })
        } else {
          this.active = item.chat_id
          this.$emit('click', item.chat_id)
        }

        // this.$emit('click', item)
      },
      // 调整购物车商品
      carDeatil(id, num, fathID) {
        this.$emit('carDeatil', id, num, fathID)
      },
      //点击左侧按钮
      tapselect(index) {
        this.currentTab = index;
        this.mainCur = index;
        this.verticalNavTop = (index - 1) * 50
      },
      //右侧滚动
      mainScroll(e) {
        let scrollTop = e.detail.scrollTop + 10;
        for (let i = 0; i < this.list.length; i++) {
          if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
            this.currentTab = i;
            this.verticalNavTop = (i - 1) * 50
            return false
          }
        }
      },
      //获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
      getHeight() {
        var top = 0;
        var bottom = 0;
        var temp = 0;
        for (let i = 0; i < this.data.length; i++) {
          let view = uni.createSelectorQuery().select("#cate-" + i);
          view.fields({
            size: true
          }, data => {
            top = temp;
            bottom = temp + data.height;
            this.list[i] = {
              top: top,
              bottom: bottom
            };
            temp = bottom;
          }).exec();
        }

      }
    }
  }
</script>

<style scoped lang="less">
  .cateBox {
    position: absolute;
    background: #fff;
    width: 100%;
    display: flex;
  }

  .cate-left {
    width: 200rpx;
    background: #f4f4f4;
    height: 100%;
  }

  .cate-left-item {
    background: #f4f4f4;
    height: 50px;
    display: flex;
    align-items: center;
  }

  .cate-left-item.activeItem {
    background: #fff;
  }

  .cate-left-item label {
    width: 4rpx;
    height: 15px;
    float: left;
    background: #f4f4f4;
  }

  .cate-left-item.activeItem label {
    background: #FE0000;
  }

  .cate-left-item text {
    width: 196rpx;
    font-size: 28rpx;
    display: block;
    text-align: center;
  }

  /* 右侧*/
  .cate-right {
    flex: 1;
  }

  .cate-right-title {
    text-align: center;
    font-size: 28rpx;
    margin-top: 20rpx;
    line-height: 80rpx;
    position: relative;
  }

  .cate-right-title .line {
    position: absolute;
    height: 2rpx;
    width: 300rpx;
    background: orange;
    top: 39rpx;
    left: 50%;
    margin-left: -150rpx;
  }

  .cate-right-title text {
    background: #fff;
    padding: 0 10px;
    position: relative;
    color: #999;
  }

  .cate-right-list {
    height: auto;
    overflow: hidden;
  }

  .shop {
    width: 100%;
    border-radius: 5px;
    padding: 15rpx;
    box-sizing: border-box;

    image {
      width: 168rpx;
      height: 168rpx;
      background: #F4F6FA;
      border-radius: 5px 5px 0px 0px;
    }

    .title {
      width: 100%;
      font-size: 28rpx;
      // height: 84rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      overflow: hidden;

    }

    .num {
      text:nth-child(odd) {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        text-align: center;
        line-height: 30rpx;
      }

      text:nth-last-child(3) {
        border: 1px solid #FF5700;
      }

      text:nth-of-type(2) {
        width: 50rpx;
        text-align: center;
      }

      text:nth-last-child(1) {
        background: linear-gradient(-66deg, #FF5700, #FE0000);
        color: #fff;
      }
    }
  }

  .ground {
    width: 100%;
    padding: 30rpx 15rpx;
    box-sizing: border-box;
    background: #fff;

    .but {
      width: 104rpx;
      height: 45rpx;
      background: #eee;
      border-radius: 5px;
      text-align: center;
      font-size: 24rpx;
      line-height: 45rpx;
    }
  }
</style>